<template>
  <div class="box">
    <!-- 购物车页面内容 -->
    <div class="box_top">
      <!-- 头部 -->
      <div class="box_top_head">
        <van-nav-bar title="购物车" />
      </div>
      <!-- 产品 -->
      <div class="box_top_product">
        <div v-for="item in 6" :key="item" class="box_top_product_list">
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          >
            <template #footer>
              <van-button size="mini">加</van-button>
              <van-button size="mini">减</van-button>
              <van-button size="mini">删除</van-button>
            </template>
          </van-card>
        </div>
      </div>
      <!-- 底部操作 -->
      <div class="box_top_made">
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </div>
    <!-- 底部导航组件 -->
    <bottomtab></bottomtab>
  </div>
</template>

<script>
import Vue from "vue";
import bottomtab from "../../components/bottomtab";
export default {
  data() {
    return {
      current: 0,
  checked:false,

    };
  },
  // 注册组件
  components: {
    bottomtab
  },
  methods: {
    // 提交商品
    onSubmit(){

    },
  }
};
</script>

<style scoped lang="less">
.box {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  .box_top {
    background-color: #f7f8fa;
    height: calc(100vh - 51px - 50px); //底部加1px的边框
    overflow: auto;
    border-bottom: 1px solid #f3f3f3;
    .box_top_head {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      height: 46px;
      background-color: #fff;
      z-index: 10;
    }
    .box_top_product {
      margin-top: 46px;
      .box_top_product_list {
        border-bottom: 1px solid #e5e5e5;
      }
    }
  }
}
.van-submit-bar {
  bottom: 50px !important;
}
</style>
